package com.fanketly.funacg2.ui.components

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.fanketly.funacg2.data.model.FilterMenuItemData
import com.fanketly.funacg2.data.tFilterMenuList
import com.fanketly.funacg2.ui.theme.FunACG2Theme

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FilterMenu(
    expanded: Boolean,
    selectedOptionText: String,
    onDismissRequest: () -> Unit,
    onExpandedChange: () -> Unit,
    onItemClick: (FilterMenuItemData) -> Unit,
) {
    Box(
        modifier = Modifier
            .wrapContentSize(Alignment.TopStart)
    ) {
        Row(
            modifier = Modifier.clickable(onClick = onExpandedChange),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(text = selectedOptionText, modifier = Modifier.padding(8.dp))
            ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded)
        }
        DropdownMenu(expanded = expanded, onDismissRequest = onDismissRequest) {
            tFilterMenuList.forEach {
                DropdownMenuItem(
                    text = { Text(it.name) },
                    onClick = {
                        onItemClick(it)
                    },
                    contentPadding = ExposedDropdownMenuDefaults.ItemContentPadding,
                )
            }
        }
    }
}


@Preview(showBackground = true)
@Composable
private fun MenuPreview() {
    FunACG2Theme {
        var expanded by remember { mutableStateOf(true) }
        var selectedOptionText by remember { mutableStateOf("1") }
        Column {
            FilterMenu(
                expanded,
                selectedOptionText,
                { expanded = false },
                { expanded = expanded.not() }) {
                selectedOptionText = it.name
                expanded = false
            }
            Column {
                listOf("A", "B", "C", "D").forEach {
                    Text(text = it)
                }
            }
        }
    }
}